<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <!-- 这一条用于移动端更好的预览设置，进行缩放比例 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>博客</title>
    <!-- Bootstrap css文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Semmanticui css文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <!-- 引入自定义css样式 -->
    <link rel="stylesheet" href="../static/css/me.css">
</head>
<body class="qt-bj">

<!--导航-->
<nav th:replace="_fragments :: menu(0)" class="ui  inverted attached segment m-padded-tb-mini m-shadow-small">
    <div class="ui container"><!-- container是一个一个容器来放 -->
        <div class="ui inverted secondary stackable menu">


            <!-- 导航左边 -->
            <h2 class="ui teal header item">TGF-BK</h2>
            <a href="#" class="active m-item item m-mobile-hide"><i class="mini home icon"></i>&nbsp;&nbsp;首页</a><!-- icom都是图标，官方文档里面有 -->
            <a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>&nbsp;&nbsp;分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>&nbsp;&nbsp;标签</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i>&nbsp;&nbsp;归档</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i>&nbsp;&nbsp;关于我</a>

            <!-- 搜索栏 -->
            <!-- right item把div容器放到最后边 -->
            <div class="right m-item item m-mobile-hide">
                <!-- input 自动为表单的形式,
                icon这个div 容器就可以放图标了
                transparent 透明的意思 -->
                <div class="ui icon inverted transparent input">
                    <input type="text" placeholder="Search...."><!-- placeholder默认显示的数据 -->
                    <i class="search link icon"></i><!-- 搜索图标,link鼠标指到变成手型 -->
                </div>
            </div>


        </div>
    </div>


    <!-- 加上面包导航，移动端点击面包导航才显示出来,m-right-top自定义样式显示到右边,m-mobile-show移动端才显示这个图标 -->
    <!-- menu toggle这个只是为了让jquery获取这个图标的，当点击这个图标，就把m-mobile-hide样式变为显示 -->
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show"><!-- icon button图标按钮 -->
        <i class="sidebar icon"></i><!-- 面包样式 -->
    </a>
</nav>

<!-- 二级导航 -->
<div class="ui attached pointing menu animate__animated animate__bounceInLeft">
    <div class="ui container">
        <div class="right menu">
            <a href="#"  class="active teal item">信息列表</a>
        </div>
    </div>
</div>


<div>
    <!--自定义弹窗:上传头像窗口-->
    <div class="widget widget1"  id="window" hidden="hidden">
        <div class="body">
            <div class="msg">上传新头像</div>
            <div id="dropz" class="dropzone"></div>
            <div class="btns">
                <a href="javascript:void(0);" class="btn-cancel" id="btn_cancel">取 消</a>
                <a href="javascript:void(0);" class="btn-confirm" id="btn_ok">上 传</a>
            </div>
        </div>
    </div>


    <!--中间内容-->
    <div  class="m-container m-padded-tb-big animated fadeIn">
        <div class="ui container">

            <form class="ui form" action="#" method="post" enctype="multipart/form-data" th:action="@{/yhAdmin/upload/{id}(id=${session.thUser.id})}">
            <div id="qqInfo" class="ui stackable grid">

                <!-- 左边 -->
                <div class="eleven wide column animate__animated animate__bounceInLeft">
                    <div class="ui container">
                        <table class="ui celled table m-width-kd">
                            <tbody>
                            <tr>
                                <td data-label="nicknameDesc" nowrap="value"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">网名</font></font></td>
                                <td><input class="m-ys-dx" th:value="${session.thUser.nickname}" type="text" name="nickname"></td>
                            </tr>
                            <tr>
                                <td data-label="yearDesc" nowrap="value"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">邮箱</font></font></td>
                                <td><input class="m-ys-dx" th:value="${session.thUser.email}" type="text" name="email"></td>
                            </tr>
                            </tbody>
                        </table>
                        <button type="submit" class="ui inverted blue button m-mobile-wide"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><i class=" image outline icon"></i>点击修改</font></font></button>
                    </div>


                    <div class="m-ys-pl">
                        <div data-label="addressDesc" nowrap="value"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">创建时间</font></font></div>
                        <div data-label="addressValue" th:text="${session.thUser.createTime}"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><script type="text/javascript">document.write(returnCitySN["cname"])</script></font></font></div>
                    </div>
                </div>




                <!-- 右边头像 -->
                <div id="avatarDiv" class="five wide column animate__animated animate__bounceInRight" style="/*text-align:center;*/ vertical-align: middle;">
                    <div id="avatarSmallDiv">
                        <input type="file" name="avatar" th:value="${session.thUser.avatar}" multiple="multiple" id="camera" accept="image/*" >
                        <img  class="ui  circular image" th:src="${session.thUser.avatar}" alt="" id="imgUrl">
                    </div>
                    <br><br>
                    <a id="rollback" class="ui inverted blue button m-mobile-wide"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><i class=" image outline icon"></i>点击头像修改</font></font></a>
                </div>

            </div>

                <!-- 非空验证（当没有输入用户和密码就显示提示） -->
                <div class="ui error mini message"></div>
                <!-- 用户名和密码错误显示的页面 -->
                <!-- th:unless判断相当于if -->
                <!-- negative变成红色错误背景 -->
                <div class="ui mini negative message" th:text="${message}" th:if="${not #strings.isEmpty(message)}">用户名和密码错误</div>
            </form>


        </div>
    </div>
</div>


<br>
<br>
<br>

<!--底部-->
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive m-mobile-hide">
    <div class="ui center aligned container"><!-- container容器,center aligned所有容器居中 -->


        <!-- grid就是一个一个格子 , 相当于bootstrap的栅格系统 , grid是分成16份-->
        <!-- 这里前面1格占1分，3格都占3份，后面一格占6份 -->
        <div class="ui inverted divided stackable grid"><!-- divided这个对grid栅格系统加上分隔线 -->
            <!-- 占几份直接用英文的数字 -->


            <!-- 第一个格子 -->
            <div class="four wide column"><!-- four4份 -->
                <div class="ui inverted link list"><!-- inverted反转颜色，link鼠标手指 -->
                    <div class="item"><!-- item居中对齐 -->
                        <!-- 图片，rounded图片是圆角,ewm-dx自定义图片大小 -->
                        <img src="http://i2.tiimg.com/724771/142be0e76be9c182.jpg" class="ui rounded image ewm-dx" alt="" >
                    </div>
                </div>
            </div>


            <!-- 第二个格子 -->
            <div class="three wide column"><!-- three3份 -->
                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4><!-- 标题 -->
                <div class="ui inverted link list"><!-- inverted反转颜色，link鼠标手指 -->
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                </div>
            </div>


            <!-- 第三个格子 -->
            <div class="three wide column"><!-- three3份 -->
                <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4><!-- 标题 -->
                <div class="ui inverted link list"><!-- inverted反转颜色，link鼠标手指 -->
                    <a href="#" class="item">Email: 2247605840@qq.com</a>
                    <a href="#" class="item">QQ: 2247605840</a>
                    <a href="#" class="item">微信: xinyikuoai</a>
                </div>
            </div>


            <!-- 第四个格子 -->
            <div class="six wide column"><!-- seven7份 -->
                <h4 class="ui inverted header m-text-thin m-text-spaced">温暖一刻!</h4><!-- 标题 -->
                <p class="m-text-thin m-text-spaced m-opacity-mini">真正属于你的💖，不应该是伤人的冰块，应该是一杯温暖人的热茶!</p>
            </div>
        </div>


        <!-- 最底下的,divider分割线,section跟上面的div的间隔s -->
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-mini">属于你的终究是我</p>



    </div><!-- 最外面的容器container -->
</footer>





<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<!-- 因为Semmantic-UI框架要依赖jquery包 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Bootstrap js文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--/*/</th:block>/*/-->

<script>
    //当点击面包导航按钮，就显示导航列表
    //menu.toggle选中面包导航按钮，当点击的时候m-item这个类标签(导航列表)，有没有m-mobile-hide这个样式，没有就加上，有就减去
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');//toggleClass这个的作用就是当点击这个按钮，如果有这个样式就减去，如果没有就加上
    });


    //头像修改
    $("#camera").change(function(e) {
        for (var i = 0; i < e.target.files.length; i++) {
            var file = e.target.files.item(i);
            var freader = new FileReader();
            freader.readAsDataURL(file);
            freader.onload = function(e) {
                var src = e.target.result;
                $("#imgUrl").attr("src",src);
            }
        }
    });


    //非空验证
    $('.ui.form').form({
        fields: {
            nickname: {
                identifier: 'nickname',//input的name值是什么，如果没有输入就会弹出下面的提示信息
                rules: [{
                    type: 'empty',
                    prompt: '请输入网名'
                }]
            },
            email: {
                identifier: 'email',//input的name值是什么，如果没有输入就会弹出下面的提示信息
                rules: [{
                    type: 'empty',
                    prompt: '请输入邮箱'
                }]
            }
        }
    });
</script>
</body>
</html>